跨端设计又双叒来了，只是响应式换个名字？

设计与技术的发展总是在互相推进。在PWA与小程序之前，跨端设计停留在“设计”与“体验”层面，通过一致性、连续性设计解决用户多设备下的体验问题，响应式仅适用于信息类静态网页，跨端设计理念难以得到真正实施。而现在跨端设计已经超出了之前的响应式概念，要达到从PC端“网页”到移动端“App”的体验映射。这篇文章我们会从跨端涉及到的技术发展、业务场景、设计思考与趋势探索，带大家更多地了解一下跨端设计。

为什么重提跨端设计？

早在2010年5月，Ethan Marcotte就提出了响应式设计概念并给出了对应的前端解决方案。很多企业官网、个人主页等我们常说的Portal页开始使用响应式设计。

Ethan Marcotte的第一个响应式案例

但由于H5页面的性能、安全、体验等问题，移动端的大部分产品开始用客户端开发而不是用H5，这从技术上就切断了响应的可能性。另外复杂业务的响应还遇到了其他难点：

1.加载过多冗余代码浪费带宽（当时流量还比较贵）；

2.加载过多冗余代码速度变慢（网络还是2G，智能手机尚未普及）；

3.复杂业务要进行两端适配对设计和技术的要求高成本高（响应式仅有布局转化的基础规则，缺少解决复杂问题的通用方案）；

4.网页端应用的本身体验缺陷：网址输入、反复登录、没有消息提醒；

跨端技术发展历程

随着网络、手机设备、前端技术的发展，跨端设计再次被关注是在2017年。这一年，Goolge提出了PWA（Progressive Web App 渐进式网页应用）。PWA让浏览器中的网页可以通过隐藏地址栏、缓存、消息推送等能力达到原生客户端的体验。这两年间PWA发展迅速，大部分浏览器均已支持，就连苹果的Safari也在今年年初悄悄开始支持。也是同一年微信提出了微信小程序，使客户端内的H5插件体验跨越式提升，开辟了新的开放生态。

2019年我们也看到移动端流量逐渐见顶后，国内一些互联网公司重新审视PC端价值（注：本文提到的PC端指运行在浏览器或包含浏览器内核的客户端上的网页），开始关注PC端与移动端的跨端解决方案。7月360公司推出360小程序主打首款全场景平台，打通PC端和移动端，覆盖用户不便在移动端使用小程序的场景，例如办公、学习及部分娱乐场景，提振流量低谷。8月微信小程序也开始支持PC端投放。

尽管PWA与小程序技术的出现不是为了“跨端”，但他们对于“跨端”的天然支持，能够让一套代码运行在PC、移动两端，就再一次产生了跨端设计实施的可能性。

什么样的场景可以跨端？

设计的理念能够真正推进下去，除了有技术保障外，还需要合适的需求场景，使用PC端的功能型产品主要是需要大屏带来的“效率”（办公、个人管理、教育）与“沉浸”（数据、金融、游戏、影视）体验。我们可以看一些PWA与小程序的双端案例，感受一下具体可以应用的场景：

金山文档（微信小程序）

Appscope - 一个应用市场  （PWA）

Google Santa Tracker - 一个小游戏 （PWA）

依赖PC、移动双端进行经营管理的电商场景，也有很多内容适合跨端。去年我们开始在电商B端业务尝试模块级、页面级的跨端。

任务管理（工具类）

用户运营旧版（数据策略类）

跨端设计不仅仅是响应式

设计与技术的发展总是在互相推进。设计上提出的概念会受到技术问题无法实现，而技术的突破则能带给设计更大的创新空间。在PWA与小程序之前，跨端设计停留在“设计”与“体验”层面，通过一致性、连续性设计解决用户多设备下的体验问题，响应式也仅适用于信息类静态网页，设计理念难以得到真正实施。现在跨端设计已经超出了之前的响应式概念，要达到的是从PC端“网页”到移动端“App”的体验映射，这需要包含：

1.双端基础组件设计规则对齐（对前端来说是同类组件API、属性对齐以及组件功能形态映射）；

Select对应Picker

2.布局响应规则（行列变化，聚合变化等）；

卡片布局的一种聚合变化

3.交互形态响应规则（导航、交互模式等）;

表单型弹窗对应新页面

4.不同场景的跨端策略，例如Dashboard页面的跨端应保证用户在首屏快速获取关键信息，下图的Bootstrap模板是一个错误示例，移动端的布局方式浪费首屏空间，降低用户获取关键信息的效率。

跨端设计趋势

在近期的跨端设计当中，我们还看到了一些特点：

渐进增强双端体验

在移动端可以使用扫码的方式更便捷地输入快递编号、拍照上传图片、根据地理位置识别地址、分享到淘外社交场景；而PC端可以侧重于批量、hover快速浏览、编辑的同时所见即所地进行预览。

输入框适配方案举例

向客户端体验看齐

无论是采用PWA技术还是小程序技术，在现在的跨端趋势中都强调最终带给用户的是客户端应用一样的体验。因为这更加符合目前用户在移动端的使用习惯。例如：通过PWA提供的消息推送、后台加载、全屏容器、桌面图标入口，可以让Instagram的移动端网页从视觉到交互完全还原客户端体验。

Instagram（PWA）

以导航适配方案为例，传统的汉堡导航方式在移动端会折叠，这对于功能展示与操作都是非常不利的，在之后的跨端设计中会逐渐被更优的导航方案替代。

汉堡导航折叠

导航适配方案举例

PC端开始接纳移动端交互

从艾瑞互联网报告中，我们可以看出每年新入网的用户移动设备早已超过电脑，这说明我们的用户从先接触电脑再接触手机，转变为先接触手机再接触电脑。以前设计时常说移动端的交互方式不能用在电脑端上，电脑端用户不熟悉，现在这种担心也许不需要了。移动端中合适的交互方式也可以尝试在PC端网页中使用。例如Switch Button，在表达一些功能开启关闭时更清晰，因此在适配时我们在PC端保留了该组件。

以往在PC端复杂场景下，“避免二次弹窗”这一条准则可能会带来一些难题。借鉴移动端进入下一页的方式，可以让电脑端网页弹窗承载更加复杂的内容。

弹窗内二级页面

Mobile first 不是唯一准则

进行具体场景的跨端设计时，我们会从两端场景出发重新对比分析用户的需求差异，明确体验的增强点与折损点。特别是电商中后台场景中：有些业务中用户的主阵地并不是在移动端，而是PC端，比如用户运营策略的设置；有些是两端分别承载不同的场景需求，比如任务的处理。

跨端转化会更加智能

正如我们前面提到的，让框架、布局以及组件级别的前端代码支持跨端，需要整理出全套跨端设计规范，这有不小的成本。但实现这样的能力后，可以大大提升后续双端研发效能，降低两套的维护成本。前期需要设计与前端进行紧密地共建，形成一致的跨端基础原则、组件规范、布局转化、交互转化，以及规范的跨端标注（与前端对齐话术）。

未来与挑战

要真正落地跨端设计理念，需要这样几个前提：

1、技术上，两端已经采用统一的技术框架；

2、业务上，有需求提效节省成本、正要开拓移动或PC新场景；

3、组织上，业务、设计、技术三个角色最好都是负责双端的；

4、设计上，现阶段除了给出完整的跨端方案之外，需要一个布道的过程，逐渐影响业务在需求阶段就整体考虑两端用户需求。

来自PD“一样来一个”的需求

我们接下来会在电商中后台场景中逐步推进跨端转化，目前还在实践积累的阶段，也有很多矛盾和挑战等待解决：跨端规则如何提取才能更适合代码化，从而真正减少设计与开发投入？为了双端响应研发提效是不是可以舍弃一部分体验？全功能跨端是不是用户的终极诉求？...

如果你的业务也需要跨端设计，对跨端设计有什么想法？在跨端过程中遇到过什么大坑？都可以在留言区和我们一起探讨。

---

参考资料

Responsive Web Design

https://alistapart.com/article/responsive-web-design

Why Responsive Design is dead

https://www.websitemagazine.com/blog/why-responsive-design-is-dead

重新定义移动办公——2018年中国企业移动办公平台发展洞察

http://report.iresearch.cn/report_pdf.aspx?id=3130

360小程序为“全场景”而生，打破PC、移动双端边界

http://www.techweb.com.cn/internet/2019-07-05/2743291.shtml

本期粉丝福利🎁

─

欢迎大家留言交流跨端设计～我们将从中挑选出一个最有价值的评论赠送一份Alibaba Design官方周边产品作为礼物哦～

上期粉丝福利互动收到了很多有价值的留言，感谢大家的热情参与👏！

经过艰难抉择，最后获得礼物的幸运读者是🎉“好笑的豆腐乳”🎉，

我们将尽快联系您寄送礼物。

////// END //////

淘宝设计，一个服务于全球亿万消费者体验的设计团队，致力于让设计触动人心，让商业美而简单。